<!--
 * @Description: 拖放
 * @Author: rendc
 * @Date: 2025-11-14 14:22:46
 * @LastEditors: rendc
 * @LastEditTime: 2025-11-17 09:14:58
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>拖放-答题卡</title>
  <script src="./js/jquery.js"></script>
  <style>
    #area{
      width: 300px;
      height: 200px;
      background-color: #ccc;
      padding: 10px;
    }
    ul{
      margin: 0px;
      padding: 0px;
    }
    li{
      border: 1px solid red;
      width: 30px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      margin: 5px;
      /* 去掉小圆点 */
      list-style-type: none;
      /* font-style: normal; */
      cursor: grab; /* 代表元素可被抓取 */
      /*js代码实现 点击元素时光标变为抓取中 */
    }
    #area>li{
      display: inline-block;
    }
  </style>
</head>
<body>
  <div id="app">
    选择范围：
      <ul id="optionUl">
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
        <li>E</li>
      </ul>
    答题区域：将你的选项拖入到此区域
    <div id="area">
    </div>
  </div>
</body>
<script>
  // 需要优化的内容
  // 1. 选中的选项能否删除
  // 2. 选中的选项能否排序
  // 。。。
  var targetLi;
  // 事件代理给li的父元素ul
  var optionUl = $("#optionUl");
  // console.log('🤡 CC - optionUl:', optionUl);
  var children = optionUl[0].children;
  // console.log('🤡 CC - children:', children);
  $.each(children,function(i,e){
    // console.log('🤡 CC - e:', e);
    // 将li元素设置为可拖拽
    // draggable="true"
    $(e).attr("draggable",true);
    // 绑定鼠标按下事件
    e.onmousedown = function(event){
      // console.log('🤡 CC - event:', event);
      // js代码实现 点击元素时光标变为抓取中 
      // e.style.cursor = "grabbing";
      $(e).css({ 
        cursor : "grabbing",
      });
    }
    // 处理拖动事件
    e.ondragstart = function(e){
      // console.log('🤡 CC - 拖拽开始:', e);
      // 获取被拖拽的元素
      console.log('🤡 CC - 被拖拽的元素:', e.target);
      // 获取
      targetLi = e.target;
    }
    e.ondrag = function(e){
      // console.log('🤡 CC - 拖拽中。。:', e);
    }
    e.ondragend = function(e){
      console.log('🤡 CC - 拖拽结束:', e);
      
    }
    e.onmouseup = function(event){
      // console.log('🤡 CC - event:', event);
      // js代码实现 点击元素后鼠标抬起光标变为可抓取
      e.style.cursor = "grab";
    }
    // $(e).on("mousedown",function(event){
    //   console.log('🤡 CC - event:', event);
    // })
  });

  // 拖拽的目标区域
  var areaDiv = $("#area");
  console.log('🤡 CC - areaDiv:', areaDiv);
  var areaDivElement = areaDiv[0];
  areaDivElement.ondragenter = (e) =>{
    // console.log('🤡 CC - 拖拽元素进入:', e);
  }
  areaDivElement.ondragover = (e) =>{
    // console.log('🤡 CC - 拖拽元素悬浮。。。:', e);
    // 阻⽌事件的默认⾏为（必须）
    // 浏览器会默认阻止drop事件，所以我们要阻止他
    event.preventDefault();
  }
  areaDivElement.ondrop = (e) =>{
    console.log('🤡 CC - 拖拽元素放下:', e);
    // 将拖拽的元素插入到当前元素中
    // e.target
    console.log('🤡 CC - 目标元素:', e.target);
    console.log('🤡 CC - targetLi:', targetLi);
    e.target.append(targetLi);
  }
  
</script>
</html>